<template>
  <div class="container">
    <image src="https://wxapi.xiaoyiwl.cn/images/%E5%88%9B%E9%80%A0%E6%80%A7%E8%83%8C%E6%99%AF.png"
      mode="scaleToFill" />

    <image src="https://wxapi.xiaoyiwl.cn/images/%E5%A8%81%E5%BB%89.jpg" class="wl" 
    @click="() =>{
      uni.navigateTo({
        url: '/pages/my/my',
      })
    }"
    />
    <!-- :style="{top: position.wlTop+'rpx', left: position.wlLeftrpx}" -->
    <image src="https://wxapi.xiaoyiwl.cn/images/%E5%88%9B%E9%80%A0%E6%80%A7.jpg" class="creativity"
    @click="() =>{
      uni.navigateTo({
        url: '/pages/creativity/creativity',
      })
      }"
  />
  <!-- :style="{top: position.creativityTop+'rpx', left: position.creativityLeft+'rpx'}" -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: {}
    }
  },
  mounted() {
    const sysInfo = uni.getSystemInfoAsync()

    // 计算缩放比例（以 iPhone6/7/8 375x667 为基准）
    const baseWidth = 375
    const scaleRatio = sysInfo.windowWidth / baseWidth

    this.position = {
      wlTop: 80 * scaleRatio,
      wlLeft: 40 * scaleRatio,
      creativityTop: 260 * scaleRatio,
      creativityLeft: 40 * scaleRatio

    }
    console.log(1);
    
    console.log(this.position);
    
  }
}

</script>

<style scoped>
.container {
  height: 100vh;
}

.container image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;

}

.container .wl {
  width: 80%;
  height: 180rpx;
  position: absolute;
  top: 80rpx;
  /* top: {{position.wlTop}} rpx; */
  left: 40rpx;
  /* left: {{position.wlLeft}} rpx; */

  z-index: 100;

}

.container .creativity {
  width: 80%;
  height: 180rpx;
  position: absolute;
  top: 260rpx;
  /* top: {{position.creativityTop}} rpx; */
  left: 40rpx;
  /* left: {{position.creativityLeft}} rpx; */

  z-index: 100;

}
</style>